<!--
 * @Author: jqm123 2289662078@qq.com
 * @Date: 2025-04-06 08:35:31
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-05-27 15:02:14
 * @FilePath: homeListItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: jqm123 2289662078@qq.com
 * @Date: 2025-04-06 08:35:31
 * @LastEditors: jqm123 2289662078@qq.com
 * @LastEditTime: 2025-04-06 09:23:32
 * @FilePath: \anxinxiu\src\components\homeListItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--  -->
<template>
  <div class="item">
    <div class="pic">
      <van-image
        width="100%"
        height="100%"
        :src="item.thumbnail"
        radius="8px 8px 0 0"
        fit="contain"
      />
    </div>
    <div class="info">
      <div class="text van-multi-ellipsis--l2">{{ item.goodsName }}</div>
      <div class="price">￥ {{ item.price }}</div>
    </div>
    <div class="type" :style="{ backgroundColor: getColor }">
      {{ typeName[type].name }}
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "homeListItem",
  components: {},
  data() {
    //这里存放数据
    return {
      typeName: [
        {
          name: "养车小课堂",
          color: "#fec739",
        },
        {
          name: "精选好物",
          color: "#2dcc63",
        },
        {
          name: "正在直播",
          color: "#008cf0",
        },
      ],
    };
  },
  props: {
    type: {
      default: 0,
      type: Number,
    }, // 0 养车小课堂 1精选好物 2直播
    item: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  //监听属性 类似于data概念
  computed: {
    getColor() {
      return this.typeName[this.type].color;
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.item {
  width: 49%;
  margin-bottom: 20px;
  position: relative;
  background: #ffffff;
  border-radius: 20px;

  .pic {
    width: 100%;
    aspect-ratio: 1;
  }

  .info {
    padding: 0 10px 15px 10px;
  }

  .text {
    width: 100%;
    padding: 20px 15px 10px 15px;
    font-size: 40px;
  }

  .price {
    font-size: 46px;
    color: #c10500;
    font-weight: bold;
  }

  .type {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 20px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 2px;
  }
}
</style>
